<template>
    <view class="arrow-up-down">
        <text class="arrow-up" :class="{ active: props.sort === 'asc' }"></text>
        <text
            class="arrow-down"
            :class="{ active: props.sort === 'desc' }"
        ></text>
    </view>
</template>

<script setup lang="ts">
const props = defineProps({
    sort: {
        type: String,
        default: '',
    },
});
</script>

<style scoped lang="scss">
.arrow-up-down {
    position: relative;
    height: 20px;
    .arrow-up {
        width: 0;
        height: 0;
        border-left: 4.5px solid transparent;
        border-right: 4.5px solid transparent;
        border-bottom-width: 6px;
        border-bottom-style: solid;
        border-bottom-color: #6F6F6F;
        position: absolute;
        top: 4px;
        left: 6px;

        &.active {
            border-bottom-color: #F25A27;
        }
    }

    .arrow-down {
        width: 0;
        height: 0;
        border-left: 4.5px solid transparent;
        border-right: 4.5px solid transparent;
        border-top-width: 6px;
        border-top-style: solid;
        border-top-color: #6F6F6F;
        position: absolute;
        bottom: 1px;
        left: 6px;

        &.active {
            border-top-color: #F25A27;
        }
    }
}
</style>
